import { onMounted, onUnmounted, ref } from 'vue'

function createGlobalScrollListener(callback) {
    // 使用 requestAnimationFrame 来优化性能，避免回调执行过于频繁
    let ticking = false;
  
    const handleScroll = (event) => {
      if (!ticking) {
        window.requestAnimationFrame(() => {
          // 在这里触发你的回调
          // event.target 就是指当前正在滚动的那个元素
          callback(event);
  
          ticking = false;
        });
        ticking = true;
      }
    };
  
    // 关键：在 document 上监听捕获阶段的 scroll 事件
    // 第三个参数 { capture: true } 启用了捕获模式
    document.addEventListener('scroll', handleScroll, { capture: true, passive: true });
  
    // 返回一个清理函数，方便调用者移除监听
    return () => {
      document.removeEventListener('scroll', handleScroll, { capture: true, passive: true });
    };
  }
  
  // --- 使用示例 ---
  
  // 1. 定义你的回调函数
  function onAnyElementScroll(event) {
    const scrollingElement = event.target;
    console.log(`检测到滚动！正在滚动的元素是:`, scrollingElement);
    
    // 你可以在这里做任何事，比如：
    // - 更新一个全局的 UI 状态
    // - 记录滚动行为
    // - 触发一些自定义动画
  }
  
  // 2. 创建全局监听器，并获取清理函数
//   const stopGlobalScrollListener = createGlobalScrollListener(onAnyElementScroll);

export default function (params) {
    const { whiteScreenDuration, block } = params
    const callbackRef = ref(null)
    let timer = null
    const DURATION = whiteScreenDuration || 50
    let observer = null

    const scrollHandler = (event) => {
        // console.log('滚动')
        // const { innerHeight } = window
        timer && clearTimeout(timer)
        timer = setTimeout(() => {
            console.log('到可视区域了', 222)
            callbackRef.value()
        }, DURATION)
    }

    const scrollToCenter = (callback, { el }) => {
        callbackRef.value = callback
        timer && clearTimeout(timer)
        timer = setTimeout(() => {
            callback()
        }, DURATION)
        // window.addEventListener('scroll', scrollHandler)
        el.scrollIntoView({ behavior: 'smooth', block })
        createGlobalScrollListener(scrollHandler)
    }

    const scrollInit = () => {
        timer && clearTimeout(timer)
        // scrollHandler && window.removeEventListener('scroll', scrollHandler)
    }

    onUnmounted(() => {
        timer && clearTimeout(timer)
        // scrollHandler && window.removeEventListener('scroll', scrollHandler)
    })

    return {
        scrollToCenter,
        scrollInit
    }
}